<template>
  <div v-if="visible" :style="{ left: left + 'px', top: top + 'px' }" class="context-menu">
      <div class="menu">
        <div class="menu-item" @click="handleClick('shuaxinshumulu')">
          <i class="el-icon-refresh menu-item-icon" style="color: #409EFF;"></i> 刷新分类
        </div>
        <div class="fgx"></div>
        <div class="menu-item" @click="handleClick('xinjianwenjianjia')">
          <i class="iconfont icon-wenjianjia menu-item-icon" style="color: #FDE28F"></i>
          新建分类
        </div>
        <div class="menu-item" @click="handleClick('chongmingming')">
          <i class="el-icon-edit-outline menu-item-icon" style="color: #909399"></i>
          重命名
        </div>
        <div class="menu-item" @click="handleClick('shanchu')">
          <i class="el-icon-close menu-item-icon" style="color: #cc4649;font-weight: 900"></i>
          删除
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      left: 0,
      top: 0,
    };
  },
  methods: {
    show(event) {
      this.visible = true;
      this.left = event.clientX;
      this.top = event.clientY;
      document.addEventListener('click', this.close);
    },
    close() {
      this.visible = false;
      document.removeEventListener('click', this.close);
    },
    handleClick(action) {
      // 如果当前不是只读，则可以进行修改
      this.$emit('handleClick', action);
      this.close();
    },
  },
};
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  padding: 5px 2px;
  list-style: none;
}
.menu {
  width: 200px;
  height: 100%;
  padding: 0px 5px;
}
.menu-item {
  width: 100%;
  height: 25px;
  padding-left: 4px;
  line-height: 25px;
  font-size: 12px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #F2F2F2;
  border-radius: 4px;
}
.menu-item-icon {
  margin-right: 2px;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
}
.menu-item-readonly {
  width: 100%;
  height: 25px;
  padding-left: 4px;
  line-height: 25px;
  font-size: 12px;
  opacity: 0.5;
  cursor: not-allowed;
}
.fgx {
  border: 0.1px solid #EBEEF5;
  margin: 4px 0px;
  border-radius: 2px
}
</style>
